<template>
  <div class="login">
    <!-- <div class="loginTop">欢迎登录</div> -->
    <svg class="icon iconlogo" aria-hidden="true">
      <use xlink:href="#icon-wangyiyunyinle-"></use>
    </svg>
      <!-- <div class="loginContent">
        <input
          type="text"
          name="phone"
          class="phone"
          v-model="phone"
          placeholder="请输入手机号码"
        />
        <input
          type="password"
          name="password"
          class="password"
          v-model="password"
          placeholder="请输入密码"
        />
        <button class="btn" @click="Login">登录</button>
      </div> -->
    <button class="phone" @click="getPhone">手机号登录</button>
    <button class="go">立即体验
      <router-link tag="button" to="/"></router-link>
    </button>
    <div class="more">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weixindenglu"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-qq"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-weibo2"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-youxiang"></use>
      </svg>

      <div class="message"> <input type="checkbox"/> 请勾选同意《用户协议》和《隐私政策》</div>
      <div class="text">
        <!-- <span class="icon iconfont icon-fuxuankuang" v-if="flag" @click="flag=!flag"></span> -->
        <!-- <span class="icon iconfont icon--fuxuankuang" v-else  @click="flag=!flag"></span> -->
      </div>
      <div class="icp">
        <p>ICP证:<a href="http://www.beian.miit.gov.cn"> 豫ICP备20230114号-v1</a></p>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data() {
      return {
        phone: '',
        password: ''
      }
    },
    methods: {
      async Login() {
        let res = await this.$store.dispatch('getLogin', {phone:this.phone,password:this.password})
        console.log(res);
        if(res.data.code===200){//如果返回的code等于200，说明登录成功，就跳转个人中心页面
        this.$store.commit('updateIsLogin',true)
        this.$store.commit('updateToken',res.data.token)
      }},
      
      getPhone() {
        if(this.flag){
          this.message = true
          setTimeout(() => {
            this.message = false
          },3000);

        }else{
          this.$router.push({
            path:'/phone'
          })
        }
      }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0.2rem;
  flex-direction: column;
  align-items: center;
  background-color: #e72727;
  .iconlogo {
    font-size: 8rem;
    color: white;
  }
  .phone{
      width: 84%;
      height: 35px;
      line-height:35px;
      color: #e11a1a;
      border-radius:40px;
      background: #fff;
      border:none;
      margin-top: 170px
    }
  .go {
      width: 84%;
      height:35x;
      line-height:35px;
      color: #fff;
      border-radius:17px;
      background: #e82929;;
      border: 1px solid #fff;
      margin-top:20px
  }
  .loginTop {
    margin-top: 1rem;
    font-size: 1rem;
    color: #fff;
  }
  .loginContent {
    width: 100%;
    // height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 2rem;
  }
  .more {
    .icon{
      font-size: 1.4rem;
      color: white;
      margin: 20px;
      margin-bottom: 45px
    }
  }
  .message, .text, .icp {
    font-size: .2rem;
    color: white;
  }
  .message {
    input {
      vertical-align: middle;
    }
  }
  .icp {
    text-align: center;
    margin-top: 50px
  }
  a {
    color: white;
  }
}
</style>
